<!DOCTYPE html>
<html>
    <head>
        <title>Module List</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
        <link rel="stylesheet" href="../../script/semantic/semantic.min.css">
        <script type="text/javascript" src="../../script/jquery.min.js"></script>
        <script type="text/javascript" src="../../script/semantic/semantic.min.js"></script>
        <script type="text/javascript" src="../../script/applocale.js"></script>
        <!-- <script type="text/javascript" src="../../script/ao_module.js"></script> -->
    </head>
    <body>
        <div class="ui container">
            <div class="ui basic segment">
                <div class="ui header">
                    <i class="external icon"></i>
                    <div class="content">
                        <span locale="defaultOpener/Title">Default Opening Module</span>
                        <div class="sub header"><span locale="defaultOpener/Subtitle">Manage your default modules to open files with given extensions</span></div>
                    </div>
                </div>
            </div>
            <div id="msgbox" class="ui icon positive message" style="display:none;">
                <i class="checkmark icon"></i>
                <div class="content">
                    <div class="header">
                        <span locale="defaultOpener/Updated">Default Opening Module Updated</span>
                    </div>
                    <p><span locale="defaultOpener/TryAgain">Try to open your file again and see if it is working</span></p>
                </div>
            </div>
            <table class="ui celled table">
                <thead>
                    <tr>
                        <th locale="defaultOpener/FileExtension">File Extension</th>
                        <th locale="defaultOpener/CurrentDefault">Current Default</th>
                        <th locale="defaultOpener/ModifyDefault">Modify Default (Save on Change)</th>
                    </tr>
                </thead>
                <tbody id="defaultOpenerList">
              
                </tbody>
              </table>
        </div>
        <script>
            loadDefaultOpener();
            
            function loadDefaultOpener(){
                $("#defaultOpenerList").html("");
                $.ajax({
                    url: "../../system/modules/getDefault?opr=list",
                    success: function(data){
                        if (data.error !== undefined){
                            console.log(data.error);
                            return;
                        }
                        for (var i =0; i < data.length; i++){
                            var ext = data[i][0];
                            var module = encodeURIComponent(data[i][1]);
                            var displayModuleName = data[i][1];
                            $("#defaultOpenerList").append(`<tr>
                                <td>${ext}</td>
                                <td>${displayModuleName}</td>
                                <td><select class="ui search selection dropdown" ext="${ext}" module="${module}" onchange="updateDefaultOpener(this);">
                                    <option value="default">${displayModuleName}</option>
                                </select>
                                </td>
                            </tr>`);
                        }

                        //Load modules into search dropdowns
                        $.get("../../system/modules/list",function(moudleList){
                            for (var i=0; i < moudleList.length; i++){
                                var thisModule = moudleList[i];
                                $(".search.dropdown").each(function(){
                                    var thisExt = $(this).attr("ext");
                                    var thisDefaultModule = decodeURIComponent($(this).attr("module"));
                                    if (thisModule.SupportedExt !== null && thisModule.SupportedExt.includes(thisExt)){
                                        //Accept this file type
                                    }
                                    if (thisDefaultModule !== thisModule.Name){
                                        $(this).append(`<option value="${thisModule.Name}">${thisModule.Name}</option>`);
                                    }
                                    
                                });
                            }

                            $('.ui.dropdown').dropdown();
                        });
                    }
                });
            }

            function updateDefaultOpener(object){
                if ($(object).val() !== "default"){
                    var ext = $(object).attr('ext');
                    //Refresh the list
                    $.ajax({
                        url: "../../system/modules/getDefault?opr=set&ext=" + ext + "&module=" + $(object).val(),
                        success: function(data){
                            setTimeout(loadDefaultOpener,500);
                        }
                    });
                    $("#msgbox").stop().finish().slideDown('fast').delay(5000).slideUp('fast');
                }
            }

            $(document).ready(function(){
                if (applocale){
                    //Applocale found. Do localization
                    applocale.init("../locale/default_opener_settings.json", function(){
                        applocale.translate();
                    });
                }else{
                    //Applocale not found. Is this a trim down version of ArozOS?
                    applocale = {
                        getString: function(key, original){
                            return original;
                        }
                    }
                }
            });
        </script>
    </body>
</html>